<template>
	<view class="content">
		<view class="list-wraper logo-wraper" @click="uplodingImg(1)">
			<view class="tit">
				<text>点击上传商家logo</text>
			</view>
			<view class="input-logo" >
				<image v-if="!logImg" src="http://mp.emshop.eonfox.com/zrhzstatic/muying/shop.png" mode=""></image>
				<image v-else :src="logImg" mode=""></image>
			</view>
		</view>
		<view class="list-wraper">
			<view class="tit">
				<text>商家名称：</text>
			</view>
			<view class="input-all">
				<input class="inpt" type="text" value="" v-model="infor.name"  placeholder="请输入商家名称" />
			</view>
		</view>
		<view class="list-wraper">
			<view class="tit">
				<text>商家QQ：</text>
			</view>
			<view class="input-all">
				<input class="inpt" type="text" value="" v-model="infor.contactQq"  placeholder="请输入商家QQ" />
			</view>
		</view>
		<view class="list-wraper">
			<view class="tit">
				<text>商家手机号：</text>
			</view>
			<view class="input-all">
				<input class="inpt" type="number" maxlength="11" v-model="infor.supportPhone" value="" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="list-wraper">
			<view class="tit">
				<text>商家类别：</text>
			</view>
			<view class="input-all">
				<radio-group>
					 <label class="radio" v-for="(item,index) in shopsType" :key='index'><radio  value="r1"  class="radio" @click="gain(item.type_id)"/>{{item.name}}</label>
				</radio-group>
			</view>
		</view>


		<view class="tips"  @click="goPage">
			<view class="tips_left">
				<text>{{addressName}}</text>
			</view>
			<view class="tips_right">
				<image src="../../static/right-arrow.png" ></image>
			</view>
		</view>
		<view class="h-20upx"></view>

		<view class="list-wraper ind-wraper">
			<view class="tit">
				<text>商家介绍：</text>
			</view>
			<view class="input-lg">
				<textarea class="lg-text" value=""  v-model="infor.description" placeholder="请输入..." />
			</view>
		</view>

		<view class="list-wraper logo-wraper"  @click="uplodingImg(2)">
			<view class="tit">
				<text>点击上传营业执照：</text>
			</view>
			<view class="input-Image">
				<image v-if="!BusinessImg"  src="http://mp.emshop.eonfox.com/zrhzstatic/muying/yingyezhizhao.png" mode=""></image>
				<image v-else :src="BusinessImg" mode=""></image>
			</view>
		</view>

		<view class="btn-box">
			<button class="btn" @click="commit()">提交申请</button>
		</view>

	</view>
</template>

<script>

	import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
	// #ifdef H5
	let jweixin = require('jweixin-module');
	// #endif

	export default {
	components: {
    		mallplusCopyright
    	},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',

				addressName:'请选择商家地址',
				logImg:'',
				infor:{},
				BusinessImg:''  ,// 营业执照
				BusinessImgId:'',
				logImgID:'',
				shopsType:[
						{
					id: 1,
					name: "服装",
				     },
					{
						id: 2,
						name: "化妆品",
					},
					{
						id: 3,
						name: "家装",
					},
					{
						id: 4,
						name: "水果",
					},
				]
			}
		},
		onLoad(){

		},
		methods: {
			goPage(){
			 console.log('位置名称：goPage');
				var _this = this
				uni.chooseLocation({
				    success: function (res) {
						console.log('res',res)
				        console.log('位置名称：' + res.name);
						_this.addressName=res.address +res.name
						_this.infor.addressDetail = res.address +res.name
						_this.infor.addressLat=res.latitude
						_this.infor.addressLng=res.longitude
				        console.log('经度：' + res.longitude);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
				    }
				});
			},
			gain(id){
				this.infor.type_id=id
				console.log('类别id',this.infor.type_id)
			},
			// 上传图片
			uplodingImg (name) {
				this.$otherApi.uploadFiles(res => {
					if (res.code == 200) {
						console.log(res.data)
						if(name==1){
							this.logImg = res.data
							this.infor.logo=res.data
						}else{
							this.BusinessImg = res.data
							this.infor.supportName=res.data
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},

			async commit(){
				var _this=this
				let form = Object.assign({},_this.infor)
				let data = await Api.apiCall('post', Api.member.applyStore, form);
				console.log(data)
				if (data) {
					this.$api.msg(`商户入驻成功`);
					setTimeout(() => {
						let url = '../../pagesC/store/storeResult?id='+data.id;
						uni.navigateTo({
							url
						});
					}, 800);
				} else {
					this.$api.msg(`商户入驻失败`);
				}
			},

			openLocation(){
				// #ifdef H5
				jweixin.getLocation({
					type: 'wgs84',
					success: res => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						jweixin.openLocation({
							latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
							longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
							name: '位置名', // 位置名

							scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
							infoUrl:"http://www.baidu.com"
						})
					},
					fail: () => {},
					complete: () => {}
				});

				// #endif
			}
		}
	}
</script>

<style>
	page{
		background: #F5F5F5;
		width: 100%;
		height: 100%;
	}
	.h-20upx{
		height: 20upx;
		display: flex;
	}
	.tips{
		display: flex;
		/* width: calc(100% - 60upx); */
		padding: 20upx;
		background-color: #FFFFFF;
	}
	.tips_left{
		width: 94%;
		font-size: 28upx;
		color: #de7d67;
	}
	.tips_right{
		width: 5%;
	}
	.tips_right image{
		width:40upx;
	    height: 40upx;
	}
	.btn{
		background-color: rgba( 242 155 135);
		color: #FFFFFF;
	}
	.input-logo{
		width: 120upx;
		height: 120upx;
		line-height: 120upx;
		text-align: center;
		font-size: 27upx;
		color: #444444;
	}
	.input-logo image{
		width: 120upx;
		height: 120upx;
	}
	.input-Image{
		width: 420upx;
		height: 320upx;
		line-height: 320upx;
		text-align: center;
		font-size: 27upx;
		border: 1upx #CCCCCC solid;
		color: #444444;
	}
	.input-Image image{
		width: 420upx;
		height: 320upx;
	}
	.radio{
		font-size: 28upx;
		transform:scale(0.7)
	}
</style>
<style scoped lang="stylus" ref="stylesheet/stylus">
	.content
		width 100%
		display flex
		flex-direction column
		color #333333
		.list-wraper
			position relative
			display flex
			align-items center
			// width calc(100% - 60upx)
			padding 20upx
			background #FFFFFF
			.tit
				flex 1.5
				text
					font-size 28upx

			.input-all
				flex 4
				.inpt
					// background red
					padding-top 6upx
					font-size 28upx

		.logo-wraper
			.input-all
				text-align right
				image
					width 100upx
					height 100upx

		.list-wraper::after
			position absolute
			content ""
			width calc(100% - 60upx)
			height 2upx
			left 30upx
			bottom 0
			background #CCCCCC
		.ind-wraper
			flex-direction column
			justify-content left
			.tit
				width 100%
			.input-lg
				width 100%
				padding 20upx 10upx
				// background red
				.lg-text
					font-size 24upx
					color #777777
		.btn-box
			width 690upx;
			padding 40upx 30upx
</style>
